<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cherry Editor - Markdown Editor</title>
    <style>
      html,
      body {
        padding: 0;
        width: 70%;
        min-width: 600px;
        max-width: 1500px;
        margin-left: auto;
        margin-right: auto;
      }
      .info span {
        margin-right: 50px;
        font-size: 12px;
        color: gray;
      }
      .cherry {
        box-shadow: none !important;
      }
      .cherry-previewer {
        border-left: none !important;
        padding: 0 !important;
      }
      .footer {
        margin-top: 50px;
      }
    </style>
    <link rel="stylesheet" type="text/css" href="../packages/cherry-markdown/dist/cherry-markdown.css" />
    <link rel="Shortcut Icon" href="./logo/favicon.ico" />
    <link rel="Shortcut Icon" href="../logo/favicon.ico" />
    <link rel="Bookmark" href="../logo/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
      integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="https://fengyuanchen.github.io/viewerjs/css/viewer.css" />
  </head>

  <body>
    <h1>纯预览页面标题</h1>
    <div class="info">
      <span>作者：Cherry</span>
      <span>时间：2024-06-20</span>
    </div>
    <hr />
    <br />
    <div id="markdown"></div>

    <div class="footer info">
      <hr />
      <a href="https://github.com/Tencent/cherry-markdown" title="关注我们">
        <svg
          height="32"
          aria-hidden="true"
          viewBox="0 0 16 16"
          version="1.1"
          width="32"
          data-view-component="true"
          class="octicon octicon-mark-github v-align-middle color-fg-default"
        >
          <path
            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
          ></path>
        </svg>
      </a>
      &nbsp;&nbsp;
      <span>这里是页面底部</span>
    </div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.6.0/dist/echarts.js"></script>
    <!--<script src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>-->
    <script src="../packages/cherry-markdown/dist/cherry-markdown.js"></script>
    <script src="https://fengyuanchen.github.io/viewerjs/js/viewer.js"></script>
    <script src="./assets/scripts/preview-demo.js"></script>
    <script type="module">
      // 使用 fetch 获取 markdown 文件内容
      const response = await fetch('./assets/markdown/index.md');
      const basicMd = await response.text();
      import { previewConfig } from './assets/scripts/preview-demo.js';
      // 在Vite中使用?raw导入的文件内容已经是字符串，无需通过fetch获取
      const config = Object.assign({}, previewConfig, { value: basicMd });
      window.cherry = new Cherry(config);
    </script>
  </body>
</html>
